<template>
    <van-nav-bar title="订单列表" left-text="返回" left-arrow @click-left="() => { $router.back() }">
    </van-nav-bar>
    <van-tabs v-model:active="active" @change="onChange">
        <van-tab title="全部"></van-tab>
        <van-tab title="代付款"></van-tab>
        <van-tab title="已付款"></van-tab>
    </van-tabs>
    <!-- 渲染区域 -->
    <div v-for="item in fatherData">
        <div>
            <p>订单号 {{ item.orderId }}</p>
            <p>状态 {{ item.status == 1 ? '已付款' : '未付款' }}</p>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { myorderlApi, paysuccessApi } from '@/api/api';
//自定义订单列表数据
let orderlistData = ref([])
//切换数据
let fatherData = ref([])
const orderlist=()=>{
    myorderlApi(localStorage.getItem('username')).then(res => {
        console.log('订单列表', res)
        orderlistData.value = res.data.data
        fatherData.value = orderlistData.value
    })
}
orderlist()  
//筛选数据 不能动源数据
const onChange = (index) => { 
    console.log(index)
    if (index == 0) {
        //全部的数据
        fatherData.value = orderlistData.value
    }
    if (index == 2) {
        //已付款 status==1
        fatherData.value = orderlistData.value.filter(item => item.status == 1)
    }
    if (index == 1) {
        //未付款 status==1
        fatherData.value = orderlistData.value.filter(item => item.status == 2)
        if (fatherData.value.length != 0) {
            paysuccessApi(fatherData.value[0].orderId).then(res => {
                console.log('切换状态', res)
                orderlist()
            })
        }

    }
}
</script>

<style lang="scss" scoped></style>